<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-tw" />
<title>vlab.info</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css" />
<link rel="stylesheet" type="text/css" href="http://jsgears.googlecode.com/svn/trunk/prettify.min/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://jquery-scrollbox.googlecode.com/svn/trunk/tests/jquery.scrollbox_demo.css" />
<link rel="stylesheet" type="text/css" href="http://vlab.info/pages/css/vlab.info.css" />
</head>
<body>
<div class="page">

<div class="header">
  <h1>jquery.scrollbox.js</h1>
  <ul class="menu">
    <li><a href="http://vlab.info/" title="回到 vlab 首頁">vlab.info</a></li>
    <li class="last-child"><a href="mailto:support[AT]vlab[dot]info">Contact</a></li>
  </ul>
</div>

<div class="content">
<p>這是一個 jQuery 的 plugin，用來做文字或圖片的捲動效果。</p>
<h2>使用範例</h2>
<p>先來看看最典型的使用範例，可以用來顯示新聞、新訊息的跑馬燈效果。</p>
<div id="demo1">
  <ul>
    <li>新體驗！國際買家服務</li>
    <li>秋季新裝大促銷活動</li>
    <li>數位3C商品全面3折起</li>
    <li>生活精品熱賣活動開跑</li>
    <li>全新首頁新年新登場</li>
    <li>百搭外套1折！限今日</li>
  </ul>
</div>

<h3>HTML</h3>
<pre class="prettyprint lang-html">
&lt;div id="demo1"&gt;
  &lt;ul&gt;
    &lt;li&gt;新體驗！國際買家服務&lt;/li&gt;
    &lt;li&gt;秋季新裝大促銷活動&lt;/li&gt;
    &lt;li&gt;數位3C商品全面3折起&lt;/li&gt;
    &lt;li&gt;生活精品熱賣活動開跑&lt;/li&gt;
    &lt;li&gt;全新首頁新年新登場&lt;/li&gt;
    &lt;li&gt;百搭外套1折！限今日&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>HTML 使用 div > ul > li 這樣的架構即可</p>

<h3>CSS</h3>
<pre class="prettyprint lang-css">
&lt;style type="text/css"&gt;
#demo1 {
  border: 1px solid red;
  width: 180px;
  height: 3.6em;
  overflow: hidden;
}
#demo1 ul {
  width: 500px;
  height: 100px;
  overflow: hidden;
  margin: 0;
}
#demo1 ul li {
  height: 1.2em;
}
&lt;/style&gt;
</pre>
<p>CSS 的部份要特別注意幾點：</p>
<ol>
  <li>div 一定要給特定的寬和高，並且指定 overflow: hidden</li>
  <li>ul 一定要比 div 大，以垂直捲動，一次捲動一個項目為例，ul 至少要比 div 高一個項目的高度才行</li>
  <li>li 最好要控制為特定高度，這樣 div 的高度比較好抓，否則會出現多一點點的情況。以這個範例來說，div 的高度剛好為 li 的 3 倍，因此一次可以看到 3 個項目</li>
  <li>實際的項目內容一定要比顯示的多，這樣才有辦法捲動，以這個範例來說，一次顯示 3 個，而總共有 6 個項目。</li>
</ol>

<h3>JavaScript</h3>
<pre class="prettyprint lang-js">
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.scrollbox.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
  $('#demo1').scrollbox();
});
&lt;/script&gt;
</pre>
<p>JavaScript 要引用 jQuery 及這個 Plugin，然後在 dom ready 事件內，選定特定物件並套用 scrollbox() 即可</p>

<h2>待續...</h2>
<p>一次寫不完，還有多種使用範例和設定值，敬請期待....</p>


</div>

<div class="footer">
  <p>&copy;2010 Virtual Design Studio - <a href="mailto:support[AT]vlab[dot]info">Contact</a></p>
</div>

</div>

<script type="text/javascript" src="http://jsgears.googlecode.com/svn/trunk/prettify.min/prettify.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-scrollbox.googlecode.com/svn/trunk/jquery.scrollbox.min.js"></script>
<script type="text/javascript">
$(function() {
  window.onload = prettyPrint;
  $('#demo1').scrollbox();
});
</script>
</body>
</html>